<template>
<div>
    <common-header
        :title="title"
        :type=3></common-header>
    <div class="mui-content sDemand-details sDemand-details-upload">
		<div class="sDemand-details-cont sDemand-details-upload-cont">
			<ul class="mui-table-view sDemand-details-upload-contul">
				<li class="sDemand-details-li-state sDemand-details-upload-li-state">
					<p class="sDemand-details-state">{{ data.statusText }}</p>
				</li>
		        <li>
		           <p class="sDemand-details-num">波&nbsp;&nbsp;&nbsp;段&nbsp;&nbsp;&nbsp;&nbsp;号:</p>
				   <p class="sDemand-details-an">{{ data.bandname }}</p>
		        </li>
		        <li>
		           <p class="sDemand-details-num">供应商编号:</p>
				   <p class="sDemand-details-an">{{ login_user.venderInfo.Id }}</p>
		        </li>
		       <li>
		           <p class="sDemand-details-num">供应商名称:</p>
				   <p class="sDemand-details-an">{{ login_user.venderInfo.Name }}</p>
		        </li>
		        <li  class="sDemand-details-select">
		        	<a class="mui-icon iconfont icon-arrowleft"></a>
		           <p class="sDemand-details-num">大&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类:</p>
				   <span>{{ data.dlText }}</span>
				   <!-- <span style="font-size: 1.4rem;" @click="showPicker = true">{{ defaultData[0].text }}  {{ defaultData[1].text }}</span> -->
		        </li>
				 <li  class="sDemand-details-select">
		        	<a class="mui-icon iconfont icon-arrowleft"></a>
		           <p class="sDemand-details-num">小&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类:</p>
				   <span>{{ data.xlText }}</span>
				   <!-- <span style="font-size: 1.4rem;" @click="showPicker = true">{{ defaultData[0].text }}  {{ defaultData[1].text }}</span> -->
		        </li>
		        <li>
		           <p class="sDemand-details-num">供应商货号:</p>
				   <input class="sDemand-details-input" v-model="submitData.pcode" type="text" placeholder="请输入供货商货号">
		        </li>
		        <li>
		           <p class="sDemand-details-num">主&nbsp;&nbsp;&nbsp;推&nbsp;&nbsp;&nbsp;&nbsp;款:</p>
				   <div class="mui-input-row mui-radio sDemand-details-radio">
				       <input name="radioTui" type="radio" v-model="submitData.ismain" value="1">
				       <label>是</label>
				   </div>
				   <div class="mui-input-row mui-radio  sDemand-details-radio">
				       <input name="radioTui" type="radio"  v-model="submitData.ismain" value="0">
				       <label>否</label>
				   </div>
		        </li>
		        <li>
		           <p class="sDemand-details-num">合&nbsp;作&nbsp;方&nbsp;&nbsp;式:</p>
				   <div class="mui-input-row mui-radio sDemand-details-radio">
				       <input name="jyfs" type="radio" v-model="submitData.jyfs" value="1">
				       <label>试销</label>
				   </div>
				   <div class="mui-input-row mui-radio  sDemand-details-radio">
				       <input name="jyfs" type="radio"  v-model="submitData.jyfs" value="0">
				       <label>非试销</label>
				   </div>
		        </li>
		        <li class="sDemand-details-upload-li-imgs">
		           <ul>
		           	    <li v-for="(img, index) in imgList" :key="index" @click="loadUpload(index)">
							<div class="img-div">
								<template v-show="img.url">
									<img :src="img.url">
								</template>
								<div class="title-div" v-show="!img.url">
									<!-- <div class="img-div-title">+</div> -->
									<div class="img-div-title">{{ img.title }}</div>
								</div>
							</div>
		           	   	</li>
		           </ul>
		        </li>
		    </ul>
		</div>
		<div class="sDemand-details-upload-sure sDemand-details-sure">
			<button id="sDemand-details-upload-again" type="button" class="mui-btn mui-btn-outlined" @click="save">保存</button>
			<button id="sDemand-details-upload-sure" type="button" class="mui-btn mui-btn-blue" @click="submit">提交</button>
		</div>
		 <div>
			<form id="editorImageForm" enctype="multipart/form-data" method="post" style="display: none">
				<div><input type="file" @change="upload" multiple ref="editFileInput" name="file" accept=".gif,.png,.jpg,.jpeg" /><br></div>
			</form>
		</div>
    </div>
    <cate-gory-pick
        :showPicker.sync="showPicker"
        :defaultData = "defaultData"
        @changeValue="changeValue"></cate-gory-pick>
	
</div>
</template>
<script>
import { mapState ,mapMutations } from 'vuex'
import commonHeader from '@/components/commonHeader.vue'
import API from '@/service/api'
import cateGoryPick from '@/components/cateGoryPick'
import { Popup } from 'mint-ui';
export default {
    components: { commonHeader, cateGoryPick, Popup },
    data() {
        return {
            id: null,
			title: '样衣图片上传',
			uploadIndex: 0,
            data: {},
            submitData: { ismain: '1', jyfs: '1', note: '', pcode: '', bandid: '', pic1: '', pic2: '', pic3: '' , pic4: '', pic5: ''},
            showPicker: false,
            defaultData: [{ text: '请选择', value: '-1' },{ text: '请选择', value: '-1' }],
			imgList: [
				{ title: '正面图', url: null, guid: '' }, 
				{ title: '背面图', url: null, guid: '' }, 
				{ title: '细节图', url: null, guid: '' }, 
				{ title: '效果图', url: null, guid: '' }, 
				{ title: '颜色图', url: null, guid: '' }, 
			],
        }
    },
    computed:{
        ...mapState( [ 'band_id', 'band_no', 'login_user' ] )
    },
    methods: {
        ...mapMutations( [ 'UPDATE_SHOW_LOADING' ] ),
        initialization() {
            API.band.getBandDetail({ id: this.band_no }).then(res=> {
				this.data = res
				this.submitData.bandid = this.band_id
                this.UPDATE_SHOW_LOADING(false)
    		})
		},
        changeValue(value) {
            this.defaultData = value
        },
		loadUpload(index) {
			this.$refs.editFileInput.click()
			this.uploadIndex = index
		},
		check() {
			let flag = true
			if(!this.imgList[0].url){
				this.$error('请上传正面图！')
				flag =  false
				return flag
			}
			if(!this.submitData.pcode){
				this.$error('请输入供应商货号！')
				flag =  false
				return flag
			}
			return flag
		},
		save() {
			if(!this.check()) return
			this.UPDATE_SHOW_LOADING(true)
			this.submitData.pic1 = this.imgList[0].guid
			this.submitData.pic2 = this.imgList[1].guid
			this.submitData.pic3 = this.imgList[2].guid
			this.submitData.pic4 = this.imgList[3].guid
			this.submitData.pic5 = this.imgList[4].guid
			this.submitData.jyfs = this.submitData.jyfs
			API.band.create(this.submitData).then(res=>{
				if(res.code == '1'){
					this.id = res.id
					this.$success()
					this.UPDATE_SHOW_LOADING(false)
				}else this.$error(res.errMsg)
			})
		},
		submit() {
			if(!this.id) {
				this.$error("请先保存上传！")
				return
			}
			this.UPDATE_SHOW_LOADING(true)
			API.band.submit({id: this.id}).then(res=>{
				this.$success()
				this.UPDATE_SHOW_LOADING(false)
				setTimeout(()=>{
					this.$router.push( { name: 'band' } )
				},1000)
			})
		},
		upload() {
			this.UPDATE_SHOW_LOADING(true)
			const files = this.$refs.editFileInput.files
			if(files.length==1) {
				const file = files[0]//获取文件表单中的文件对象
				this.imgUpload(file, this.uploadIndex)
			}else if(files.length>5) {
				this.$error("图片数量不能超过5张")
			}else {
				for(let k=0; k<files.length; k++) {
					const file = files[k]
					this.imgUpload(file, k)
				}
			}
			setTimeout(()=> {
                this.UPDATE_SHOW_LOADING(false)
            },1000)
		},
		imgUpload(file, index) {
			// let img = await file.compress()
			if(file.size>=2040000)
				return this.$error("请上传小于2M的图片！")
			else {
				API.currency.upload(file).then(res => {
					this.imgList[index].url = res.files[0].thumbnailUrl1
					this.imgList[index].guid = res.files[0].guid
				})
			}	
		},
    },
    created() {
       this.initialization()
    },
}
</script>
<style lang='less' scoped>
.sDemand-details-radio label{
	margin-top: -13px;
}
.img-div{
	position: relative;
    overflow: hidden;
	padding-bottom: 100%;/*重要属性*/
	.title-div{
		width: 100%;
		height: 100%;
		position: absolute;
		.img-div-title{
			width: 100%;
			font-size: 14px;
			height: 100%;
			justify-content:center;
			align-items:center; 
			display: -webkit-flex;
		}
	}
	img{
		width: 100%;
		height: 100%;
		position: absolute;
	}
}
.sDemand-details-upload-li-imgs{
	margin-bottom: 40px!important;
}
</style>

